<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 难度 -->
      <el-form-item label="题干">
        <div ref="box"></div>
      </el-form-item>
      <div>
        <el-form-item label="难度" prop="nname" style="display: inline-block">
          <el-select
            v-model="ruleForm.nname"
            placeholder="请选择活动区域"
            :loading="nloading"
            @focus="nseleList()"
          >
            <el-option
              v-for="(v, i) of selList.nname"
              :key="i"
              :label="v.nname"
              :value="v.nname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="课程名称"
          prop="nname"
          style="display: inline-block"
        >
          <el-select
            v-model="ruleForm.nname"
            placeholder="请选择活动区域"
            :loading="nloading"
            @focus="nseleList()"
          >
            <el-option
              v-for="(v, i) of selList.nname"
              :key="i"
              :label="v.nname"
              :value="v.nname"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="选项">
        <div v-for="(v, i) of box" :key="i">
          <div :ref="v.ref" style="width:70%;margin-right:20px"></div>
          <div>
            <el-button icon="el-icon-plus" @click="crebox">添加选项</el-button>
            <el-button style="margin: 25px" @click="delbox()"
              >删除选项</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item label="解析">
        <div ref="box1"></div>
      </el-form-item>
      <el-form-item label="知识点">
        <div ref="box2"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import E from "wangeditor";
import hljs from "highlight.js";
export default {
  data() {
    return {
      nloading: false,
      tloading: false,
      editor: null,
      editor1: null,
      editor2: null,
      box: [
        {
          ref: "box3",
          editor: "editor3",
        },
      ],
      selList: [],
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      //富文本菜单
      menus: [
        "strikeThrough",
        "foreColor",
        "underline",
        "image",
        "code",
        "undo",
      ],
      fontSizes: {
        "x-small": { name: "10px", value: "1" },
        small: { name: "13px", value: "2" },
        normal: { name: "16px", value: "3" },
        large: { name: "18px", value: "4" },
        "x-large": { name: "24px", value: "5" },
        "xx-large": { name: "32px", value: "6" },
        "xxx-large": { name: "48px", value: "7" },
      },
    };
  },
  methods: {
    nseleList() {},
    tseleList() {},

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.editor = new E(this.$refs.box);
    this.editor.config.height = 70;
    this.editor.config.menus = this.menus;
    this.editor.config.fontSizes = this.fontSizes;
    this.editor.config.menuTooltipPosition = "down";
    this.editor.highlight = hljs;
    this.editor.create();

    this.editor1 = new E(this.$refs.box1);
    this.editor1.config.height = 100;
    this.editor1.config.menus = this.menus;
    this.editor1.config.fontSizes = this.fontSizes;
    this.editor1.config.menuTooltipPosition = "down";
    this.editor1.highlight = hljs;
    this.editor1.create();

    this.editor2 = new E(this.$refs.box2);
    this.editor2.config.height = 100;
    this.editor2.config.menus = this.menus;
    this.editor2.config.fontSizes = this.fontSizes;
    this.editor2.config.menuTooltipPosition = "down";
    this.editor2.highlight = hljs;
    this.editor2.create();

    this.box[0].editor3 = new E(this.$refs.box3);
    this.box[0].editor3.config.height = 70;
    this.box[0].editor3.config.menus = this.menus;
    this.box[0].editor3.config.fontSizes = this.fontSizes;
    this.box[0].editor3.config.menuTooltipPosition = "down";
    this.box[0].editor3.highlight = hljs;
    this.box[0].editor3.create();
  },
};
</script>
